import React from 'react';
import { connect } from 'react-redux'
import menuRoute from "routes/menuRoute";
import {Button, Table, Icon, Popover, Form, Badge} from 'antd';
const FormItem = Form.Item;
import {messages} from "share/common";
import SlideFrame from 'components/slide-frame'
import EditNotificationRules from 'containers/setting/notification-setting/notification-rule/edit-notification-rule'
import notificationRolesService from 'containers/setting/notification-setting/notification-setting.service'
import ResizeTable from "components/resize-table";

class NotificationRules extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      data: [],
      page: 0,
      pagination: {
        total: 0,
        showQuickJumper: true,
      },
      record: {
        isEnabled: true,
        regulationName: '',
        regulationCode: '',
        regulationComment: '',
        triggerType: 'AUTO',
        remindClients: [],
        remindDays: [],
        remindTimes: [],
      },
      isNew: true,
      showSlideFrame: false,
      columns: [
        {
          title: messages('setting.key767')/*序号*/, dataIndex: '_index', width: '48px', render: (text) => {
            return (
              <Popover placement="topLeft" content={text}>{text}</Popover>
            )
          }
        },
        {
          title: messages('setting.key1587')/*编码规则*/, dataIndex: 'regulationCode', render: (text) => {
            return (
              <Popover placement="topLeft" content={text}>{text}</Popover>
            )
          }
        },
        {
          title: messages('setting.key1588')/*规则名*/, dataIndex: 'regulationName', render: (text) => {
            return (
              <Popover placement="topLeft" content={text}>{text}</Popover>
            )
          }
        },
        {
          title: messages('setting.key1031')/*描述*/, dataIndex: 'regulationComment', render: (text) => {
            return (
              <Popover placement="topLeft" content={text}>{text}</Popover>
            )
          }
        },
        {
          title: messages('setting.key1703')/*规则类型*/, dataIndex: 'triggerType', render: (text) => {
            return (
              <Popover placement="topLeft" content={text === "AUTO" ? "自动" : "手动"}>{text === "AUTO" ? "自动" : "手动"}</Popover>
            )
          }
        },
        {
          title: messages('setting.key1096')/*状态*/, dataIndex: 'isEnabled', width: '10%', render: (text) => {
            return (
              <Badge status={text ? 'success' : 'error'} text={text ? messages('common.status.enable') : messages('common.status.disable')}/>
            )
          }
        },
        {
          title: messages('setting.key1147')/*操作*/, dataIndex: 'operation', width: '10%', render: (text, record) => {
            return (
              <a onClick={(e) => this.editNotificationRules(e, text, record)}>{messages('setting.key1071')/*编辑*/}</a>
            )
          }
        },
      ],
    }
  }


  componentWillMount () {
    this.NotificationRules();
  }

  //获取提醒规则
  NotificationRules = () => {
    const {page} = this.state;
    this.setState({
      loading: true,
    });
    notificationRolesService.getNotificationRules(page).then(res => {
        this.setState({
          data: res.data,
          loading: false,
          pagination: {
            total: Number(res.headers['x-total-count']),
            current: this.state.page + 1,
            onChange: this.onChangePaper,
          }
        })
      }
    ).catch(err => {
      this.setState({
        loading: false,
      });
    })
  };

  //点击分页
  onChangePaper = (page) => {
    if(page - 1 !== this.state.page){
      this.setState({
          page: page -1 ,
        }, () => {
          this.NotificationRules();
        }
      )
    }
  };

  addNotificationRules = () => {
    this.setState({
      isNew: true,
      showSlideFrame: true,
      record: {
        isEnabled: true,
        regulationName: '',
        triggerType: 'AUTO',
        regulationCode: '',
        regulationComment: '',
        remindClients: [],
        remindDays: [
           'MON',
           'TUE',
           'WED',
           'THU',
           'FRI',
        ],
        remindTimes: [],
      },
    });
  };

  //点击编辑
  editNotificationRules = (e, text, record) => {
    this.setState({
      showSlideFrame: true,
      isNew: false,
      record,
    });
  };

  handleCloseSlide = () => {
    this.setState({
      showSlideFrame: false,
    });
    this.NotificationRules();
  };

  render () {
    const {pagination, data, columns, loading, record, showSlideFrame, isNew } = this.state;
    const params = {
      record: record,
      showSlideFrame: showSlideFrame,
      isNew: isNew,
    };
    return (
      <div>
        <Button type={'primary'} onClick={this.addNotificationRules}>{messages('common.create')/*新建*/}</Button>
        <div style={{margin: '10px 0'}}> {messages('setting.key1589',{arg1:pagination.total})/*共搜索到{arg1}条数据*/}
        </div>
        <ResizeTable
          rowKey={(record, index) => index}
          loading={loading}
          dataSource={data}
          columns={columns}
          pagination={pagination}
          size="middle"
          bordered
        />
        <SlideFrame content={EditNotificationRules}
                    title={isNew ? messages('setting.key1590')/*新建提醒规则*/ : messages('setting.key1591')/*编辑提醒规则*/}
                    show={showSlideFrame}
                    params={params}
                    onClose={() => this.setState({showSlideFrame : false})}
                    afterClose={this.handleCloseSlide}/>
      </div>
    )
  }
}

NotificationRules.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
  }
}


const wrappedNotificationRules = Form.create()(NotificationRules);
export default connect(mapStateToProps)(wrappedNotificationRules);
